<template>
  <div class="roleLeft">
    <div class="createRole">
      <span>创建新的角色</span>

      <el-popover
        placement="bottom-start"
        width="100"
        trigger="click"
      >
        <div class="popover-wrap">
          <div @click="addRoleGroup = true">创建角色组</div>
          <div @click="addRole = true">创建角色</div>
        </div>

        <i slot="reference" class="el-icon-plus"></i>
      </el-popover>

    </div>

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
    >

      <MenuItem  v-for="item in menuItems" :key="item.roleName" :item="item"/>

    </el-menu>

    <el-dialog title="创建角色组" :visible.sync="addRoleGroup" width='30%' :close-on-click-modal="false">
      <el-form :model="roleGroupForm">
        <el-form-item label="名称" label-width="80px">
          <el-input v-model="roleGroupForm.name" placeholder="请输入角色组名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='small' @click="addRoleGroup = false">取 消</el-button>
        <el-button size='small' type="primary" @click="sureAddRoleGroup">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="创建角色" :visible.sync="addRole" width='30%' :close-on-click-modal="false">
      <el-form :model="roleForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="roleForm.name" placeholder="请输入角色组名称"></el-input>
        </el-form-item>

        <el-form-item label="目标分组">
          <el-select v-model="roleForm.targetGroup" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='small' @click="addRole = false">取 消</el-button>
        <el-button size='small' type="primary" @click="addRole = false">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { getRoleGroupAndRoleInfo,saveRoleGroup } from '@/api/contacts'
import MenuItem from './MenuItem'
export default {
  components:{MenuItem},
  data(){
    return{
      menuItems:[
        {
          children:[
            {
              children:[],
              flag:false,
              id:58,
              roleName:"管理员测试"
            }
          ],
          flag:true,
          id:57,
          roleName:"默认"
        }
      ],
      addRoleGroup:false,
      roleGroupForm:{
        name:''
      },
      addRole:false,
      roleForm:{},
      options:[
        { 
          value: '选项1',
          label: '黄金糕'
        },
        { 
          value: '选项2',
          label: '222'
        }
      ]
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      // 获取角色组和角色信息所有数据 /nuwa-sys-role/queryRoleGroupAndRoleInfoList
      getRoleGroupAndRoleInfo({ appId:88}).then(res=>{
        if(res.code===200){
          this.menuItems = res.data
        }
      })
    },
    async sureAddRoleGroup(){
      // 角色组--保存功能 /nuwa-sys-role/saveRoleGroup
      try{
        const res = await saveRoleGroup({appId:88,roleGroupName:this.roleGroupForm.name})
        if(res.code===200){
          this.addRoleGroup = false
          this.init()
        }else{
          this.$message.error('新建角色组失败')
        }
      }catch(e){
        this.$message.error('新建角色组失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.roleLeft{
 
  width: 20%;
  .createRole{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    span{
      color: #91a1b7;
    }
  }
}
.popover-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  div{
    line-height: 30px;
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border-radius: 6px;
    &:hover{
      background: #f4f6f9;
    }
  }
}
</style>